<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>MeteoCal</title>
    </h:head>
    <h:body style="font-family: sans-serif">

        <h:form>
            <h:panelGrid style="color: #3366ff" id="grid2" columns="2"  cellpadding="3" width="100%">
                <p:column style="width:85%;">
                    <div style="float: left; ">
                        <h:commandLink value="MeteoCal" style="font-size: large; font-weight: bold; padding-right: 2px" action="personal?faces-redirect=true"/>
                        <h:outputLabel value="beta" style="font-size: x-small; padding-right: 15px"/>
                        <p:outputLabel for="search" />
                        <p:autoComplete id="search" minQueryLength="3" forceSelection="true" value="#{personalBean.searched_user}" completeMethod="#{personalBean.completeSearchText}" effect="fade" emptyMessage="No users match"/>
                        <p:commandButton id="searchgo" icon="ui-icon-search"  action="#{personalBean.searchGo()}"/>
                    </div>
                </p:column>


                <p:column style="width:20%;">
                    <div style="float: right;">
                        <p:outputLabel value="#{personalBean.getLoggedUserFormatted()}" style="font-size: small; padding-right: 15px"/>
                        <p:commandButton id="notifications"  icon="ui-icon-mail-open"  action="notifications?faces-redirect=true"/>
                        <p:menuButton id="opts" value="Options" style="float: right;">
                            <p:menuitem value="#{personalBean.calendarPrivacy}" action="#{personalBean.toggleCalendarPrivacy()}" update="opts"  />
                            <p:menuitem value="Import Calendar" action="upload?faces-redirect=true"/>
                            <p:menuitem value="Export Calendar" ajax="false" action="#{personalBean.getCalendar()}" /> 
                            <p:menuitem value="Sign Out" action="#{personalBean.logout()}" icon=" ui-icon-person"/>
                        </p:menuButton>
                    </div>
                </p:column>
            </h:panelGrid>
        </h:form>
        
        <hr style=" background-color: #3366ff; height: 5px" />

        <p:dataScroller value="#{notificationsBean.string_list}" var="record" chunkSize="10" >
            <f:facet name="header">#{notificationsBean.title}</f:facet>
            <h:panelGrid columns="2" columnClasses="logo,detail" style="margin: 5px; padding: 5px;">
                <p:column style="width:25%">
                    <img src="#{notificationsBean.iconPath(record.get(0))}" style="width:100px;height:100px;" />
                </p:column>
                <p:column style="width:75%;">
                    <p:outputPanel style="margin: 20px;">
                        <h:panelGrid columns="2" cellpadding="5" >
                            <h:outputText value="From:" style="font-weight: bold"/>
                            <h:outputText value="#{record.get(1)}" />

                            <h:outputText value="Details:" style="font-weight: bold"/>
                            <h:outputText value="#{record.get(2)}" />
                        </h:panelGrid>
                        <h:panelGrid columns="3" style="margin-top: 5px;">
                            <p:commandButton value="#{notificationsBean.acceptText(record.get(0))}" action="#{notificationsBean.accept(record.get(3),record.get(0))}" disabled="#{record.get(4)}" id="accept_btn"  icon="ui-icon-check" title="accept" />
                            <p:commandButton value="Decline" action="#{notificationsBean.decline(record.get(3))}" id="decline_btn" icon="ui-icon-close" title="decline" rendered="#{notificationsBean.showButton(record.get(0))}" />
                            <p:commandButton value="Go to event" action="#{notificationsBean.openEvent(record.get(0), record.get(3))}" rendered="#{notificationsBean.hasEvent(record.get(0), record.get(3))}"/>
                        </h:panelGrid>
                    </p:outputPanel>
                </p:column>
            </h:panelGrid>
        </p:dataScroller>

    </h:body>
</html>